import React from 'react';
import { View, Image } from '@tarojs/components'
import style from './index.module.scss'

interface Props {
  src: string;
  containerStyle?: React.CSSProperties;
  containerClassName?: string;
  imageClassName?: string;
  contentClassName?: string;
  onClick?: (e: { stopPropagation: () => void }) => void;
}

const ImageBackground: React.FC<Props> = ({
  src, children, containerStyle, containerClassName, imageClassName, contentClassName, onClick
}) => (
  <View onClick={onClick} className={`${style.container} ${containerClassName}`} style={containerStyle}>
    <Image className={`${style.bgImage} ${imageClassName}`} src={src} />
    <View className={`${style.content} ${contentClassName}`}>
      {children}
    </View>
  </View>
)

export default ImageBackground
